Міністерство освіти і науки України Кіровоградський національний технічний університет Кафедра програмування та захисту інформації Дисципліна : Web-програмування Лабораторна робота №2 Тема: Основи СSS Ціль: Познайомитися із синтаксисом та основними елементами мови СSS. Знати: Способи створення різних дизайнів сайту за допомогою СSS. Уміти: Встановлювати стилі для HTML-елементів за допомогою селекторів СSS. Завдання: Продумайте та створіть дизайн для свого сайту з лабораторної роботи №1. Ідея для дизайну сайта повинна бути зображена у вигляді ескізу (схематичного або детального, на Ваш розсуд) на папері, або у графічному редакторі. Всі стилі сайту мають бути прописані у файлі style.css. Варіант 29 - Сайт спортивного клубу
CSS /* Основной стиль */ html, body { margin: 0; height: 100%; color: #8a9dc9; font-family: Arial, Tahoma, Vernada; font-size: 12px; background: #212637 url(../design_img/center_bg.jpg) center top repeat-y; } .wrapper { height: auto !important; width: 1000px; margin-left: auto; margin-right: auto; } h1 { margin-bottom: 30px; margin-top: 0px; font-size: 24px; font-family: 'times new roman'; text-align: center; font-weight: normal; } img { border: 0px; } a:link { color: #f7af59; text-decoration: none; } a:visited { color: #f7af59; text-decoration: none; } a:hover { color: #f7af59; text-decoration: underline; } table { width: 100%; border-collapse: collapse; } #top_panel { height: 40px; background: url(../design_img/top_panel_bg.jpg) repeat-x; padding-top: 10px; padding-left: 85px; } #login_title { height: 31px; width: 90px; background: url(../design_img/login_title.jpg) no-repeat; float: left; margin-right: 8px; } #top_panel input { width: 134px; height: 29px; background: none; border: none; font-family: Arial; font-size: 12px; color: #a8aeb5; outline: none; } #login_f, #password_f { float: left; width: 142px; height: 31px; padding-left: 30px; margin-left: 6px; } #login_f { background: url(../design_img/login_f.gif) no-repeat; } #login_f:hover { background: url(../design_img/login_f.gif) left 100%; } #password_f { background: url(../design_img/password_f.gif) no-repeat; } #password_f:hover { background: url(../design_img/password_f.gif) left 100%; } #login_button { display: block; float: left; width: 90px; height: 28px; background: url(../design_img/login_button.jpg) no-repeat; text-align: center; color: #f7af59; text-shadow: 0px -1px #410e07; padding-top: 9px; font-size: 14px; margin-top: -3px; margin-left: 4px; padding-right: 4px; } #login_button:hover { background: url(../design_img/login_button.jpg) left 100%; text-decoration: none; } #remember { font-family: 'times new roman'; font-size: 14px; float: left; margin-left: 12px; padding-top: 5px; } #remember a { text-decoration: underline; } #remember a:hover { text-decoration: none; color: #fff; } #top_bg { background: url(../design_img/top_bg.jpg) center top no-repeat; } #bottom_bg { background: url(../design_img/bottom_bg.jpg) center bottom no-repeat; } #header { height: 177px; padding-left: 328px; padding-top: 170px; background: url(../design_img/header_bg.jpg); } #buttons { background: url(../design_img/buttons_bg.jpg) no-repeat; height: 74px; } #reg_button { display: block; float: left; margin-left: 83px; background: url(../design_img/reg_button.jpg) no-repeat; width: 213px; height: 74px; } #reg_button:hover { background: url(../design_img/reg_button.jpg) left 100%; } #vk_button { width: 191px; height: 53px; display: block; float: right; background: url(../design_img/vk_button.jpg) no-repeat; margin-top: 21px; } #vk_button:hover { background: url(../design_img/vk_button.jpg) left 100%; } #help_button { width: 67px; height: 53px; display: block; float: right; background: url(../design_img/help_button.jpg) no-repeat; margin-top: 21px; margin-right: 68px; } #help_button:hover { background: url(../design_img/help_button.jpg) left 100%; } #menu { height: 100px; background: url(../design_img/menu_bg.jpg) no...